<template>
    <div class="toolbox">
      <div class="tool" v-if="!loginStore.isLoggedIn">
        <div v-for="item in values" :key="item.id" class="tool-title" @click="selectTitle(item.id)" :class="{ 'tool-title-active': selectedId === item.id }">
          {{ item.title }}
        </div>
      </div>
      <div class="tool" v-else>
        <RouterLink v-for="item in values" :key="item.id" class="tool-title" @click="selectTitle(item.id)"
        :class="{ 'tool-title-active': selectedId === item.id }" :to="item.path">
          {{ item.title }}
        </RouterLink>
      </div>
      <div class="box" v-if="!loginStore.isLoggedIn">
        你还未进行任何备课，可以在上方搜索框中输入你要备课的内容
      </div>
      <div class="box-active" v-else>
        <RouterView></RouterView>
      </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useLoginStore } from '@/stores/login';
const loginStore = useLoginStore()
let selectedId = ref(1)
let values = ref([
    {
        id: 1,
        title: '最近资料',
        path: '/recent-source'
    },
    {
        id: 2,
        title: '设计模版',
        path: '/design-template'
    },
    {
        id: 3,
        title: '资料模板',
        path: '/source-template'
    },
    {
        id: 4,
        title: '分析模板',
        path: '/analysis-template'
    }
])
function selectTitle(id: number){
   selectedId.value = id
}
</script>

<style scoped lang="less">
@import url('@/components/ToolBox/index.less');
</style>